<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/hezi.css">
</head>
<body>
    <h2>盒子类型</h2>
    <h3>box-sizing:border-box;</h3>
    <!-- 
        1.盒子的大小一经固定，不会随着边框和内边距的变化而变化。
    2.边框和内边距的变化会影响内容的大小 -->
    <div class="b-box"></div>

    <h3>box-sizing:content-box;</h3>
    <!-- 1.盒子的大小是固定的内容的大小
    2.整个盒子的大小会随着边框和内边距的大小变化而变化 
    3.盒子的总大小 = content + padding + boder
-->

    <div class="c-box">内容</div>
    <h3>外边距</h3>
    <div class="box-ma"></div>
    
    前面<span class="sb">盒子</span>后面
    <div class="box-ma"></div>
    <!-- 行内元素的盒子模型
    1.可以设置padding，可以把行内元素撑大，上下不会对布局产生影响，左右会对布局产生影响
    2.可以设置margin，上下不会对布局产生影响，左右会对布局产生影响
    3.可以设置border,上下不会对布局产生影响，左右会对布局产生影响
    4.不可以设置宽高，宽高由内容决定 -->
    <hr>
    <div class="big b1">
        <!-- 12 -->
        <div class="small"></div>
    </div>
    <div class="dd"></div>
    <div class="big b2">
        b2
    </div>
    <hr>
    <!-- 1.盒子外边距重叠的问题，不会累加，会以最大值为外边距
    2.只要被分隔，外边距就会重叠 -->

    <!-- 如果子元素和父元素的外边距重叠，那么子元素的上外边距会传递给父元素，可以通过给父元素一个内边距来解决 -->
    <div class="ib"></div><br>
    <div class="ib"></div>
    <h2>盒子边框</h2>
    <div class="bor"></div>
    <div class="tuoyuan"></div>
    <hr>
    <div class="aaa"></div>
    <hr>
    <div class="bbb"></div>
    <hr>
    <div class="ccc"></div>
    <hr>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html> 